<template>
  <div class="chart">
    <div ref="chartRef" v-if="hasData"></div>
    <a-empty v-else></a-empty>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import ResumeService from '@/api/resume';
import { echarts } from '@/utils/echarts';
import { EChartsOption } from 'echarts/types/dist/shared';
import _ from 'lodash';

const chartRef = ref<HTMLDivElement>();
let ei: echarts.ECharts;
const hasData = ref(true);
const centers: any = [15, 50, 85];

function chartResize() {
  ei.resize();
}

async function renderChart(series: any) {
  const option: EChartsOption = {
    color: ['#6671E5', '#B7EA80', '#F6945F', '#3ECF8E'],
    series: _.flatten(
      series.map((t: any, index: number) => {
        return [
          {
            name: t.name,
            type: 'pie',
            radius: [60, 100],
            label: {
              show: true,
              fontSize: 18,
              fontWeight: 'bold',
              position: 'inside',
              color: '#000',
              formatter: () => {
                return t.name;
              },
            },
            labelLine: { show: false },
            labelLayout: {
              x: `${centers[index]}%`,
              y: '50%',
            },
            center: [`${centers[index]}%`, '50%'],
            data: t.data,
            itemStyle: {
              opacity: 1,
              borderWidth: 3,
            },
            emphasis: {
              disabled: true,
              scale: false,
            },
          },
          {
            name: t.name,
            type: 'pie',
            radius: [60, 100],
            label: {
              fontSize: 18,
            },
            center: [`${centers[index]}%`, '50%'],
            data: t.data,
            itemStyle: {
              opacity: 1,
              borderWidth: 3,
            },
          },
        ];
      }),
    ),
  };
  ei.setOption(option, true);
}

async function fetchPageData() {
  const resp = await ResumeService.selectResumePredictedIndustry<any>({
    seekerResumeTypeEnum: 'online',
  });
  if (resp.code === 200) {
    const { data } = resp;
    if (!data) {
      hasData.value = false;
      return;
    }

    const series: Array<{
      name: string;
      data: any;
    }> = [];
    for (const [key, value] of Object.entries(data)) {
      let name: any;
      if (key === 'l1') name = '一级职能分布';
      if (key === 'l2') name = '二级职能分布';
      if (key === 'l3') name = '三级职能分布';

      const result = [];

      for (const [key2, value2] of Object.entries(value as [])) {
        result.push({
          value: value2,
          name: key2,
        });
      }
      series.push({
        name,
        data: result,
      });
    }

    renderChart(series);
  }
}

onMounted(() => {
  fetchPageData();
  ei = echarts.init(chartRef.value!);
  window.addEventListener('resize', chartResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', chartResize);
});
</script>

<style scoped lang="less">
.chart {
  position: absolute;
  left: 0;
  top: 44px;
  right: 0;
  bottom: 0;

  div {
    height: 100%;
  }
}
</style>
